<template>
	<view class="content">
		<esunNavbar :headerName="headerName"></esunNavbar>
		<view class="container" style="font-size: 15px;">
			<view v-show="step ===0" style="padding:12px 12px;">
				<u-cell-group customStyle="background:#fff;">
					<u-cell title="扫描母托盘" :border="true">
						<view slot="value" style="display: flex;width: 70%;">
							<u--input style="padding:0;" placeholder="扫描或者输入" border="surround" v-model="uniqueCode"
								@focus="hideKeyboard" :focus="uniqueCodeFocus" :disabled="uniqueCodeDisabled"
								@blur="uniqueCodeBlur"></u--input>
							<u-icon name="scan" color="#969799" size="28"></u-icon>
						</view>
					</u-cell>
					<u-cell title="扫描入库口" :border="true">
						<view slot="value" style="display: flex;width: 70%;">
							<u--input style="padding:0;" placeholder="扫描或者输入" border="surround" v-model="locCode"
								@focus="hideKeyboard" :focus="locCodeFocus" :disabled="uniqueCodeDisabled"
								@blur="locCodeBlur"></u--input>
							<u-icon name="scan" color="#969799" size="28"></u-icon>
						</view>
					</u-cell>
				</u-cell-group>
			</view>


			<!-- 主要内容区域 -->
			<scroll-view class="content" scroll-y>
				<!-- 物料列表 -->
				<view class="material-list">
					<view class="material-item" v-for="(item, index) in materialList" :key="index">
						<view class="material-row">
							<!-- <text class="label">托码：</text>
							<text class="value">{{ item.palletCode }}</text> -->
							<text class="label margin-left">箱条码：</text>
							<text class="value">{{ item.boxCode }}</text>
						</view>
						<view class="material-row">
							<text class="label">物料编码：</text>
							<text class="value">{{ item.materialCode }}</text>
						</view>
						<view class="material-row">
							<text class="label">物料名称：</text>
							<text class="value">{{ item.materialName }}</text>
						</view>
						<view class="material-row">
							<text class="label">批次：</text>
							<text class="value">{{ item.batch }}</text>
						</view>
						<view class="material-row">
							<text class="label">收货日期：</text>
							<text class="value">{{ item.receiveDate }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<esunTabbar @confirm="confirm" @cancel="cancel" @refresh="refresh"></esunTabbar>
		<esunMask :showMask="showMask"></esunMask>
	</view>
</template>
<script>
	import esunNavbar from 'components/esun-navbar/esun-navbar.vue' 
	import esunTabbar from 'components/esun-tabbar/esun-tabbar.vue' 
	import esunMask from 'components/esun-mask/esun-mask.vue' 
	import store from '@/store'
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import moment from 'moment'
	/*#ifdef H5*/
	const mui = require('static/mui.min.js')
	/*#endif*/
	export default {
		components: {
			esunNavbar,
			esunTabbar,
			esunMask
		},
		data() {
			return {
				userid:'',
				domain: '',
				sessionid: '',
				headerName:'',
				showMask:false,
				fieldList: [

				],
				materialList: [],
				materialListTmp: [
					{
						palletCode: 'M01',
						boxCode: 'S202312001001',
						materialCode: 'M001002003',
						materialName: '螺丝钉 M8x20mm',
						batch: 'LOT20231201',
						receiveDate: '2023-12-01'
					},
					{
						palletCode: 'M01',
						boxCode: 'S202312001002',
						materialCode: 'M001002004',
						materialName: '螺母 M8',
						batch: 'LOT20231201',
						receiveDate: '2023-12-01'
					},
					{
						palletCode: 'M01',
						boxCode: 'S202312002001',
						materialCode: 'M002001001',
						materialName: '垫片 8mm',
						batch: 'LOT20231202',
						receiveDate: '2023-12-02'
					}
				],
				explainList: [],
				remark:'',
				step: 0,
				uniqueCode: '',
				locCode: '',
				uniqueCodeFocus: false,
				uniqueCodeDisabled: false,
				picList: [{
					type: 5,
					label: '故障现象照片',
					pic:[]
				},{
					type: 6,
					label: '故障原因照片',
					pic:[]
				}],
				pointType: 5,
				cameraFlag: false
			}
		},
		onLoad: function(option) {
			var _this = this;
			console.log('option', option);
			// _this.$store.getters.getAll.WCS = 'http://10.124.0.109:5066'
			// _this.$store.getters.getAll.WCS = 'http://10.125.0.38:5052'
			// _this.domain = 'acc'
			// _this.userid = 'appTest'
			_this.headerName = JSON.parse(option.data).headerName
			var usermsg = JSON.parse(uni.getStorageSync('usermsg'))
			_this.userid = usermsg.userid
			_this.domain = usermsg.domain
			_this.sessionid = usermsg.sessionid
			_this.language = usermsg.language
		},
		mounted:function(){
			var _this = this
			_this.uniqueCodeFocus = true
		},
		watch: {
		   
		},
		methods: {
			hideKeyboard(){
				var _this = this
				/*#ifdef H5*/
				console.log('h5端')
				return
				/*#endif*/
				_this.$nextTick(function() {
					 uni.hideKeyboard()
					// _this.hide()
				})
			},
			hide(){
				var _this = this
			    // 只是解决软键盘的闪现
			    var interval = setInterval(function(){
			        uni.hideKeyboard();//隐藏软键盘
			    },10);
			        setTimeout(() => {
						clearInterval(interval);
			    },500); 
			},
			// 扫描唯一码
			uniqueCodeBlur() {
				var _this = this;
				setTimeout(function () {
					if (_this.uniqueCode == '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '托盘码不能为空'
						});
						_this.appUtil.beep()
						return;
					}
					_this.chkUniqueCode()
				}, 100)
			},
			// 校验唯一码，带出唯一码详情
			chkUniqueCode(){
				var _this = this
				var data = {
				  XaucUniqueCode: _this.uniqueCode.trim()
				};
				try {
					_this.showMask = true

					// 调用接口，获取托盘明细materialList
					// 从materialListTmp中查找匹配的数据
					_this.materialList = _this.materialListTmp.filter(item => {
						return item.palletCode.toLowerCase() === _this.uniqueCode.trim().toLowerCase()
					})

					if (_this.materialList.length === 0) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '未找到相关托盘信息'
						});
						_this.appUtil.beep()
						return
					}

				}
				catch (e) {
					console.log(e)
					return	
				}
				finally {
					_this.showMask = false
				}
				// _this.http({
				// 	url: _this.$store.getters.getAll.WCS + '/api/XaucMstr/CheckRtPhotos',
				// 	method: 'post',
				// 	data: JSON.stringify(data),
				// 	success: async e => {
				// 		_this.showMask = false
				// 		var rtdt = e;

				// 		if(rtdt.code != 200) {
				// 			_this.appUtil.beep()
				// 			uni.showModal({
				// 			    title: '提示',
				// 			    content: rtdt.resultMsg ? rtdt.resultMsg : '系统异常，请稍后重试',
				// 				showCancel: false,
				// 			    success: function (res) {
				// 			        _this.uniqueCodeFocus = false
				// 					_this.uniqueCode = ''
				// 					setTimeout(function() {
				// 						_this.$nextTick(function() {
				// 							_this.uniqueCode = ''
				// 							_this.uniqueCodeFocus = true
				// 						})
				// 					}, 100);
				// 			    }
				// 			});
				// 			return;
				// 		}
				// 		uni.showToast({
				// 			icon: 'none',
				// 			position: 'bottom',
				// 			title: '获取成功'
				// 		});
				// 		_this.uniqueCodeDisabled = true
				// 		if(e.data){
				// 			if(e.data.tableHeaderList){
				// 				for (var i = 0; i < e.data.tableHeaderList.length; i++) {
				// 					if(e.data.tableHeaderList[i].isShow  && e.data.tableHeaderList[i].property !=='xaRemark'){
				// 						_this.fieldList.push(e.data.tableHeaderList[i])
				// 					}
				// 					if( i === e.data.tableHeaderList.length-1 && e.data.tableHeaderList[i].isShow  && e.data.tableHeaderList[i].property ==='xaRemark'){
				// 						_this.fieldList.push(e.data.tableHeaderList[i])
				// 						// _this.remark = e.data.tableHeaderList[i].xaRemark
				// 					}
				// 				}
				// 			}
				// 				console.log(_this.fieldList)
				// 			for (var i = 0; i < _this.fieldList.length; i++) {
				// 				_this.fieldList[i].value = e.data.valueDic[_this.fieldList[i].property]
				// 				if(_this.fieldList[i].property==='xaRemark'){
				// 					_this.remark = e.data.valueDic[_this.fieldList[i].property]
				// 				}
				// 				if(_this.fieldList[i].property==="xaReason"){
				// 					var a = e.data.valueDic[_this.fieldList[i].property].split(';')
				// 					var b= ''
				// 					if(a && a.length!==0){
				// 						for (var q = 0; q < a.length; q++) {
				// 							switch (a[q]){
				// 								case '赝品':
				// 									b +='赝品,'
				// 									break;
				// 								case "过保质期":
				// 									b +='过保质期,'
				// 									break;
				// 								case "破损":
				// 									b +='破损'
				// 									break;
				// 							}
				// 						}
				// 						_this.fieldList[i].value = b
				// 					}
				// 				}
				// 			}
				// 			if(e.data.streamList){
				// 				for (var i = 0; i < e.data.streamList.length; i++) {
				// 					if(e.data.streamList[i].xaucpdDet && (e.data.streamList[i].xaucpdDet.xaucpdPointType==5||e.data.streamList[i].xaucpdDet.xaucpdPointType==6)){
				// 						for (var ii = 0; ii < e.data.streamList[i].streamList.length; ii++) {
				// 							var item = e.data.streamList[i].streamList[ii]
				// 							var pic = 'data:image/jpg;base64,'+ item.base64Str
				// 							await base64ToPath(pic).then(path=>{
				// 								_this.picList[e.data.streamList[i].xaucpdDet.xaucpdPointType-5].pic.push({
				// 									index: ii,
				// 									fileId: item.fileId,
				// 									uri: path
				// 								})
				// 							})
				// 						}
				// 					}
				// 				}
				// 			}
				// 			// _this.picList = []
				// 			console.log(_this.picList)
				// 		}
				// 	},
				// 	fail: e => {
				// 		_this.appUtil.beep()
				// 		_this.showMask = false
				// 		_this.uniqueCodeFocus = false
				// 		_this.uniqueCode = ''
				// 		setTimeout(function() {
				// 			_this.$nextTick(function() {
				// 				_this.uniqueCode = ''
				// 				_this.uniqueCodeFocus = true
				// 			})
				// 		}, 100);
				// 	},
				// 	complete:e=>{
				// 		_this.showMask = false
				// 	}
				// });
			},

			// 扫描入库口
			locCodeBlur() {
				var _this = this;
				setTimeout(function () {
					if (_this.locCode == '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '入库口不能为空'
						});
						_this.appUtil.beep()
						return;
					}
					if (_this.locCode.trim().toLowerCase() !== 'in01') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '入库口不存在'
						});
						_this.appUtil.beep()
					}
				}, 100)
			},
			ajaxSave(){
				var _this = this
				var saveId = []
				var pointTypeFiles = []
				let formData = new FormData();
				console.log('=====================')
				console.log(_this.picList)
				for (var i = 0; i < _this.picList.length; i++) {
					var list = _this.picList[i].pic
					if(list.length !==0){
						pointTypeFiles[_this.picList[i].type-5] = {
							xaucpdDet:{
								xaucpdPoint: 2,
								xaucpdPointType: _this.picList[i].type
							},
							files:[]
						}
					}
					console.log(JSON.stringify(pointTypeFiles))
					for (var ii = 0; ii < list.length; ii++) {
						if(list[ii].name){
							formData.append([ii].name, list[ii].blob)
							console.log(list[ii])
							pointTypeFiles[_this.picList[i].type-5].files.push(list[ii].name)
						}
						if(list[ii].fileId){
							saveId.push(list[ii].fileId)
						}
						
					}
				}
				for (var i = 0; i < pointTypeFiles.length; i++) {
					if(!pointTypeFiles[i] || pointTypeFiles[i].files.length===0){
						pointTypeFiles.splice(i,1)
						i--
					}
				}
				console.log(pointTypeFiles)
				var obj = {
					xaucMstr:{
						XaucUniqueCode:_this.uniqueCode.trim(),
						FileIds:saveId,
						XaucpdType:2,
						XaucpdAPIType: 2,
					},
					pointTypeFiles: pointTypeFiles
				}
				
				console.log(obj)
				 formData.append('jsonStr',JSON.stringify(obj))
				_this.showMask = true
				mui.ajax({
					url: _this.$store.getters.getAll.WCS + '/api/XaucMstr/PostRPByPoint',
					type: 'post',
					headers: {
						'x-user': _this.userid||'',
						'x-language': _this.language ||'ch',
						'x-corp': '',
						'x-domain': _this.domain ||'',
						'x-token': _this.sessionid ||'',
					},
					data: formData,
					processData: false,
					contentType: false,
					success: function(res) {
						_this.showMask = false
						var rtdt = res;
						if(rtdt.code === "100403"){
							_this.appUtil.beep()
							uni.showModal({
								title: '提示',
								content: rtdt.resultMsg ? rtdt.resultMsg : '系统异常，请稍后重试',
								showCancel: false,
								success: function (res) {
									_this.appUtil.logout()
								}
							});
							return
						}
						if(rtdt.code != 200) {
							_this.appUtil.beep()
							uni.showModal({
								title: '提示',
								content: rtdt.resultMsg ? rtdt.resultMsg : '系统异常，请稍后重试',
								showCancel: false,
								success: function (res) {
								}
							});
							return;
						}
						uni.showToast({
							title: '上传成功',
							icon: ' success', 
							duration: 2000
						})
						_this.refresh()
					},
					error: function(xhr, type, errorThrown) {
						_this.showMask = false
						console.log(type);
				
					}
				
				});
			},
			confirm() {
				var _this = this
				if (_this.uniqueCode == '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '托盘码不能为空'
					});
					_this.appUtil.beep()
					return;
				}
				if (_this.locCode == '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '入库口不能为空'
					});
					_this.appUtil.beep()
					return;
				}
				if (_this.materialList.length === 0) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '未找到相关托盘信息'
					});
					_this.appUtil.beep()
					return
				}

				uni.showToast({
					title: '下发成功',
					icon: ' success',
					duration: 2000
				})
				_this.refresh()
			},
			cancel() {
				var _this = this
				_this.fieldList = []
				_this.uniqueCodeDisabled = false
				_this.uniqueCode = ''
				_this.locCode = ''
				setTimeout(function () {
					_this.$nextTick(function () {
						_this.uniqueCode = ''
						_this.uniqueCodeFocus = true
					})
				}, 100);
			},
			refresh(){
				var _this = this
				_this.picList = [{
					type: 5,
					label: '故障现象照片',
					pic:[]
				},{
					type: 6,
					label: '故障原因照片',
					pic:[]
				}]
				_this.fieldList = []
				_this.explainList = []
				_this.remark = ''
				_this.step = 0
				_this.uniqueCodeDisabled = false
				_this.uniqueCode = ''
				_this.materialList = []
				_this.locCode = ''
				setTimeout(function() {
					_this.$nextTick(function() {
						_this.uniqueCode = ''
						_this.uniqueCodeFocus = true
					})
				}, 100);
			}
		}
	}
</script>

<style scoped>
	>>>.u-border{
		border: 0px;
	}
	.huanhang{
		white-space: normal;
		word-wrap:break-word;
		border: 1px solid #ddd;
		display:flex;
		justify-content:center !important;
	}
	>>>.u-input{
		padding: 0 !important;
	}
	
.material-list {
  margin: 0rpx 20rpx;
}

/* .content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
} */
/* 
.container {
  flex: 1;
  overflow: auto;
} */
/* 
.content {
  flex: 1;
  overflow: auto;
} */
.material-item {
  background-color: #fff;
  padding: 10rpx;
  border-bottom: 2px solid #eee;  /* 添加边框 */
  margin-bottom: 10rpx;    /* 添加底部间距 */
}

.material-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  border: #666;
}

.label {
  font-size: 14px;
  color: #666;
  margin-right: 10rpx;
}

.value {
  font-size: 14px;
  color: #333;
  margin-right: 10rpx;
}

</style>
